<%--
  Created by IntelliJ IDEA.
  User: ZYF
  Date: 2021/4/15
  Time: 9:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="./static/css/bootstrap.css">
</head>
<body>
<form action="booking" method="post">
    <table id="tab" align="center" class="table table-hover table-bordered">
        <p class="text-center">
            <a href="insert.jsp" class="btn btn-primary">添加预约</a>
        </p>
        <tr>
            <td colspan="5">
                <!--text-center  文本居中 -->
                <h1 class="text-center">疫苗接种预约系统</h1>
            </td>
        </tr>
        <tr>
            <td class="text-center">预约人姓名</td>
            <td class="text-center" id ="cordId">预约人身份证号</td><span id="folg"></span>
            <td class="text-center">接种状态</td>
            <td class="text-center">接种日期</td>
            <td class="text-center">操作</td>
        </tr>
        <c:forEach items="${list}" var="item">
            <tr>
                <td>${item.userName}</td>
                <td>${item.cardId}</td>
                <td>
                    <c:if test="${item.status eq '0'}">预约</c:if>
                    <c:if test="${item.status eq '1'}">已接种</c:if>
                </td>
                <td>${item.bookingDate}</td>
                <td><a href="booking?opr=update&id=${item.id}">完成接种</a></td>
            </tr>
        </c:forEach>

    </table>
    <script src="./static/jquery-3.5.1.js"></script>
    <script>
        $("#cordId").blur(function(){
            $.ajax({
                url:'booking?opr=check',
                type:'post',
                data:{
                    cordId:$("#cordId").val().trim()
                },
                dataType:'text',
                success:function (data) {
                    $("#folg").css("color","red");
                    if (data=="true"){
                        $("#folg").text('已预约');
                    }
                }
            })
        })
    </script>
</form>
</body>
</html>
